So you're ready to learn how to write your
first JavaScript? Well before you learn the language, you should know how it works.
Scripts placed within <SCRIPT> tags are
evaluated after the page loads. Functions are stored, but not executed. In fact, functions
are executed by events in the page. It's important
to understand the difference between defining a function and calling the function.
Defining the function simply names the function and specifies what to do when the function
is called. Calling the function actually performs the specified actions with the indicated
parameters.
If you are confused, don't be. It really isn't as difficult
as it sounds.
|
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function square(i) {
document.write("The call passed ", i ," to the function.","<BR>")
return i * i } document.write("The function returned ",square(2),".")
</SCRIPT>
</HEAD>
|
If you were to put this in your HTML document, it would be
seen in your browser as:We passed 2 to the function. The function
returned 4. This is a simple script which defines 2 as a function, then orders the
browser to double the size of the fuction by using return i *
i The reason you see We passed 2 to the function. The
function returned 4. is because of document.write,
which orders the browser to write the results.
The function document.write
is used in just about any JavaScript you write. The example of JavaScript printing Hello, World! is shown below:
|
<BODY>
<SCRIPT LANGUAGE="JavaScript">
document.write('Hello, World!');
</SCRIPT>
</BODY>
|
This function is held in the <BODY>
tag rather than in the <HEAD> tag. document.write is known as a host function and all web
browsers supporting JavaScript will display this simply as the text Hello,
World!.
In JavaScript, you can create an INPUT/OUTPUT function in 3
simple, effective ways. By changing document.write('Hello,
World!'); to alert('Hello, World!');,
you can alert your visitor with a popup button which forces the user to click OK in order
to continue. The other 2 are confirm('Enter?');
which forces a user to either click OK and continue or cancel and leave, and prompt('Your name is?'); which allows the visitor to
type into a textbox.
Please keep this in mind for later in the tutorial. Now,
let us focus on storing information inside JavaScript code using variables & or
directly in constants. A variable begins with var
and is stored directly in the script. You'll find most of your scripting trouble held
within variables because of its exactness. If you use an unknown character in one, your
entire script will not work.
JavaScript is a loosely typed language meaning that
variables do not necessarily have a defined variable type. Each variable can hold values
of various types. This may all sound weird to the total non programmer, but its easy once
you experiment with it.
|
var x= 10;
var y= "11";
var y= '11';
var z= 1 + y;
document.write(x);
|
This example shows basically one of several things
variables can do. This is obviously simple addition. By defining variables, you can write
them using document.write(x); (where x is your
var name) or call them from further in your script.
The simple building blocks in all data of JavaScript are
known as the primitive types. These are as follows:
- Strings: "Hello World!"
- Numbers: Integers (1, 50) & Decimals (1.5, 50.1)
- boolean: True or False
JavaScript will recognize the following special characters.
This idea derived from the C programming language:
- \n - newline
- \t - tab
- \f - form feed
- \b - backspace
- \r - carriage return
In addition to the 3 primitive types, there are 3 less
obvious ones:
- NaN - Not a Number; a result of a math operation gone wrong.
- null - No Data. Nothing has been stored in the variable.
- undefined - No Data. Usually bad; error in your script.
Now that you have some background on variables, we
introduce the array. An array lets you store multiple pieces of data in the same variable.
Using arrays allows you to put all similar variables under 1 name, rather than name them
all separately.
In JavaScript 1.2, the statement new
Array creates a new array set to a specific value. This allows you to create
an array with several elements by listing them in brackets:
|
arrayName = [element0, element1, ..., elementn]
|
In this example arrayName
is the name of the new array & elementn is a
list of values for the array's elements.
Arrays can expand in the number of size and are quite
flexible compared to arrays used in C. Another trick with an array is placing an array
element in another array. This opens an unlimited amount of uses in mathematics and
graphics.
Now in the next section, we'll look futher into functions
and we'll meet statements, objects, operators, & type conversation. Ready? |
